網站系統規劃 - 很多重複的程式碼？談網頁內容重用、模組化。 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

DAY 21

網站系統規劃實務系列第 21 篇

網站系統規劃 - 很多重複的程式碼？談網頁內容重用、模組化。

php 網頁設計程式設計鐵人賽

tony1223

2012-10-14 23:41:07

25732 瀏覽

分享至

本篇文章作為網站實戰開發的第七篇，我們將繼續實作更多細節，
在繼續往下開始之前，我們計畫先聊聊 View 的重用、模組化。

--------系列簡介--------

網站系統可說是現在最多學子與新人想要入門的一個領域，
這個原本屬於新興的領域，這幾年來也累積許多年的知識與 pattern ，
在有限的環境（stateless）與有限的伺服器端、瀏覽器資源下，
成為許多人進入程式的一塊入門鐵板(?)。

這個系列希望能夠就網站系統設計幾個門檻著手，
這是設定給初心者作為學習，給同好們作為回顧，

重新認識有關網站系統的每個環節。
在前三天的文章裡面，我們分別介紹了
1.如何引入 CI 、製作View
2.引入 bootstrap 協助我們進行 UI 設計
3.如何透過 CI 與 DB 進行互動，並做簡易的資料檢核、畫面呈現

由於我們主要是進行基礎教學，所以範例都會挑比較基本的實作，
接下來在我們繼續往下實作之前，本篇我們先聊一些更基本的事情：

＠ View 的重複性：

雖然我們目前建置的 view 只有六個，其中只有兩個是有實作內容的，
但是其中已經有不少重複內容，如以註冊完成為例：

application/views/register_success.php

<html >

	<meta charset="utf-8">
	<title>發文系統 - 會員註冊成功</title>
    <link rel="stylesheet" href="<?=base_url("/css/bootstrap.min.css")?>">
    <link rel="stylesheet" href="<?=base_url("/css/bootstrap-responsive.min.css")?>">



<div class="container">
	<div class="alert alert-success">
		恭喜你 （<?=$account?>），你已經完成註冊，
		接下來馬上到登入頁面去試試看吧！
		<a href="<?=site_url("user/login")?>">登入</a>
	</div>
</div>

其中你會發現，Head 的內容我們幾乎會在所有的 view 中都一直重複。

一般而言，有一種建構網頁規則的方式是將網頁分成：

* 共用性內容 (meta content)
常見於 css 樣式表的引入跟 title / description 以及一些常用全域 JS 的引入。（ex.jQuery ）

* 目的性內容 (target content)
針對當前頁面要表達的內容，所需要的細節

通常要抽出多少共用性內容取決於頁面的複雜度跟邏輯上的需要，
但是一個頁面，通常都至少可以抽出 header 與 footer 兩個基本區塊。

如前述的內容，如果我將有關 header 載入的部份抽出並建立範例檔案，如下：

application/views/_site_header.php

<html >

	<meta charset="utf-8">
	<title><?php 
		if(isset($pageTitle)){ 
			echo $pageTitle ; //透過變數設定
		} else{ 
			echo "發文系統" ; //預設標題
		} 
	?></title>
    <link rel="stylesheet" href="<?=base_url("/css/bootstrap.min.css")?>">
    <link rel="stylesheet" href="<?=base_url("/css/bootstrap-responsive.min.css")?>">

（PS：底線開頭是筆者的命名習慣，意味著這個 php 只能被用於載入。）

另外雖然 footer 目前沒有太多資料，但暫時也先抽出如：
application/views/_site_footer.php

切 footer 的優點在於全站性 GA (Google Analytics) 設定會輕鬆很多，
這是很常見得需求。

這麼一來，我們原本的 register_success.php 這個 View 就可以大幅簡化為

<?php include("_site_header.php"); ?>
<div class="container">
	<div class="alert alert-success">
		恭喜你 （<?=$account?>），你已經完成註冊，
		接下來馬上到登入頁面去試試看吧！
		<a href="<?=site_url("user/login")?>">登入</a>
	</div>
</div>
<?php include("_site_footer.php"); ?>

＠ include ？

include 是 php 用來載入另一個 view 的語法，他會先載入指定的 php 執行完畢，
並將指定的 php 所產出的 html 繪出後再繼續處理原本的 php 檔案。

＠為什麼要用 include

這樣可以讓我們更聚焦於內容的區塊，因為大部分的 head 基本上都是重複的，
而沒有重複的地方（如頁面標題），我們可以透過定義變數的方式進行處理。

在這裡我們還需要設定原本的 user controller ，
將 title 改為 "發文系統 - 會員註冊成功"，步驟如下：

修改 application/controllers/user.php

$this->load->view('register_success',Array(
	"account" => $account,
	"pageTitle" => "發文系統 - 會員註冊成功"	//設定 pageTitle 參數
));

完整修改後的檔案清單請參考這個網址

＠ isset ？

這個 php 的函數我們一直都還沒有介紹到，這裡指的意思是判斷這個變數是否有被定義，
如果我們不確定這個變數一定會被定義到，（如view可能不一定每次都會寫）

希望這個變數在沒有指定狀況也會動，就會需要這個判斷。

if(isset($myVar)){ //有定義 $myVal 的情況下

}else{
//沒有定義 myVal 的情況下
}

＠接著我們來套用其他頁面吧，如 register view ：

套用前

<html >

	<meta charset="utf-8">
	<title>發文系統 - 會員註冊</title>
    <link rel="stylesheet" href="<?=base_url("/css/bootstrap.min.css")?>">
    <link rel="stylesheet" href="<?=base_url("/css/bootstrap-responsive.min.css")?>">



<div class="container">
	<form action="<?=site_url("/user/registering")?>" method="post"  >
		<?php  if (isset($errorMessage)){?>
		<div class="alert alert-error">
			<?=$errorMessage?>
		</div>
		<?php }?>
		<table class="table table-bordered">
			<tr>
				<td>
					Account
				</td>
				<td>
					<?php if(isset($account)){ ?>
					<input type="text" name="account" value="<?=htmlspecialchars($account)?>" />
					<?php }else{ ?>
					<input type="text" name="account" />
					<?php } ?>
				</td>
			</tr>
			<tr>
				<td>
					Password
				</td>
				<td>
					<input type="password" name="password" />
				</td>
			</tr>
			<tr>
				<td>
					Re-type Password
				</td>
				<td>
					<input type="password" name="passwordrt" />
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input class="btn" type="submit" value="送出" />
				</td>
			</tr>
		</table>
	</form>
</div>

套用後：

<?php include("_site_header.php"); ?>
<div class="container">
	<form action="<?=site_url("/user/registering")?>" method="post"  >
		<?php  if (isset($errorMessage)){?>
		<div class="alert alert-error">
			<?=$errorMessage?>
		</div>
		<?php }?>
		<table class="table table-bordered">
			<tr>
				<td>
					Account
				</td>
				<td>
					<?php if(isset($account)){ ?>
					<input type="text" name="account" value="<?=htmlspecialchars($account)?>" />
					<?php }else{ ?>
					<input type="text" name="account" />
					<?php } ?>
				</td>
			</tr>
			<tr>
				<td>
					Password
				</td>
				<td>
					<input type="password" name="password" />
				</td>
			</tr>
			<tr>
				<td>
					Re-type Password
				</td>
				<td>
					<input type="password" name="passwordrt" />
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input class="btn" type="submit" value="送出" />
				</td>
			</tr>
		</table>
	</form>
</div>
<?php include("_site_footer.php"); ?>

另外當然不免俗的還是要修改 controller/user.php

	public function register()
	{
		$this->load->view('register',
			Array("pageTitle" => "發文系統 - 會員註冊")
		);
	}

再比對一次修改前與修改後結果，有沒有覺得更能聚焦在重要的細節上了呢？

另外由 controller 決定標題也是更適合其責任的作法，

像是瀏覽文章頁面時，我們可能會希望以文章的標題作為標題，
讀取作者頁面時，我們可能希望讀取作者的帳號作為標題的一部分。

＠在我們繼續後面的討論之前

在這裡通常是很容易有爭議的部份，所以我們得用多些章節來解釋。

在這裡我們必須再回頭探討一下我們這樣設計的幾個假設，
首先我們的第一個假設是使用者會隨著頁面切換 css 檔案、head 區塊的機率不大。

＠ Head ?

這裡你可能會有異見，因為很多人所學的設計模式，
就是 JavaScript file 應該放置於 Head，
而 head 會需要不斷的根據頁面所使用到的 JavaScript 去載入不同 JS。

OK，基本上筆者並不認同這種設計方案，
對於 JS 引入的設計方案，筆者認為最最理想的狀況，
應該是透過 AMD 的作法只載入一隻 main 的 JS ，並且由其進行後續的相依性處理。

這樣就可以完全使用一個變數，就解決大多的問題。

當然這個目前還不是非常主流的設計方案，
因為開發者對 AMD 的認識還不足，加上還有許多舊專案在這個世界上。

但至少你真正應該做的，是將 JavaScript 檔案放置 site_footer 之前載入，

在 Head 載入 JavaScript 在大多數一般的狀況下沒有具體的益處，
而且有許多的壞處，像是會使頁面輸出中止，而讓頁面讀取感覺非常緩慢。

一般 JS 的設計與效能調校教材，都會教你把 JS 的讀取與執行放置在之前。

＠那不放 JS， CSS 總要變化了吧？

一般而言，筆者是蠻鼓勵大家把 CSS 減少檔案數並且盡量一次載入的，
理由是檔案變多連線數就會變多，會造成連線上的效率低落。

如筆者的習慣會是：

1.site.css 負責放全站所有的 css ，其中不同頁面用到的 css ，
用不同的 namespace 與註解清楚分隔開來供日後修改參考。

2.其他 plugin css 將需要預先載入的 css ，直接預設就讓他載入。
(如果是 tinyMCE 或 ckeditor 這種狀況的特例處理，讓他自己讀取就好。:P )

＠模組化：不重複、彈性、可讀性

在我們繼續後面的討論之前，最後再談有關切分子畫面可能的爭議，
基本上核心原則就是不要有重複一次以上的代碼。

但是這裡的重複，筆者認為該考量得是精神上的重複，而不是實質上的重複，
舉例，<div> 這個 tag 重複無數次，我們需要為他建立 helper 來避免 <div> 重複嗎？

不，應該要看 <div> 內容要做的目的是否重複。

做這種 no duplicated code 時，筆者希望讀者們有件事情一定要謹記於心：
很多東西看起來很像，但內容與精神其實是完全不一樣的東西。

這種時候是應該按照精神跟內容去分類的。

另外因為要模組化，其中有部份需要變動時，我們就會需要透過變數來進行處理，
如何使變數的數量處於一個合理而不擾人的狀況，也是一個課題。
（當用一個view要一直想有哪些變數要給，是很討厭的。）

一般而言筆者會將變數以註解的方式標明於 view 的最上方，方便取用的人進行瞭解。

第三件事情是如果切分太多的子 view，特別是子 view 裡面又有子 view 時，
這時候程式碼的可讀性，將會因為層層遮蔽而更難以瞭解全貌。

可能的話，要盡可能避免複雜的子層結構，讓 view 只是個簡單的 view。

基本上切分 view 並沒有所謂的準則，像 CI 內建也有提供 layout 讓你使用，
但是筆者對 layout 全站只能有一個這件事情不太滿意，所以並不常用。XD

如何切分 module ，並且讓網站因此組織得很漂亮，
對筆者而言並沒有真正的 best practice ，端看於頁面功能數、結構複雜程度。

這裡說得只是筆者常使用的 pattern 之一，但是也常常會因地制宜做出不同設計，
希望讀者可以在之後自行去體會這其中的細節與奧妙。:)

好的，再經過一堆囉唆的介紹之後，重要的當然還是實戰。

技術這種東西的討厭點在於，明明寫起來跟組裝起來就是很簡單的事情，
扯到「觀念」這回事就非得寫得落落長，深怕一個寫錯就會讓人誤入歧途。XD

只有程式碼是不會騙人的，也只有撰寫程式碼才能累積實戰的細節。:P

好的，接下來我們繼續開發這樣一個網站，首先我們先稍微回顧現在的狀態，
我們要做的事情是大約以下的範圍：

* 首頁  
    * 熱門文章
    * 熱門作者
  
* 會員系統  
    * 註冊  
        * 註冊完成  
        * 註冊失敗（資料錯誤）  

    * 登入  
        * 登入失敗密碼輸入錯誤  
        * 忘記密碼表單  
            * 忘記密碼流程相關頁面  
        * 登入成功（轉向、訊息提示、畫面回饋）  
  
    * 文章管理系統  
        * 瀏覽  
            * 作者所有文章列表  
            * 作者分類文章列表  
            * 單一文章頁面  
            * 全站分類列表  
            * 全站分類文章清單  
        * 發表  
            * 文章發表  
                * 發表失敗（字數超出限制、使用者已登出等）  
            * 文章編輯  
                * 編輯失敗（字數超出限制、使用者已登出等）  
            * 文章刪除  
                * 刪除失敗（使用者已登出、使用者權限不符等）

但我們現在進行的只有底下的部份：

* 會員系統  
    * 註冊  
        * 註冊完成  
        * 註冊失敗（資料錯誤）

接下來我們即將面臨每個專案都會碰到的問題，要先做哪一個。XD

先解釋為什麼我們先挑註冊，當時先挑註冊，
是因為沒有註冊就沒有會員，沒有會員的狀況下發文章很奇怪。:P

雖然說也是可以先從資料庫建立 user 資料，
來先跳過註冊階段開發後續，但就寫文章而言這樣解釋起來太麻煩。:P

一般筆者實作這類功能時，主要會先從以下順序進行：

1.首頁（只有主要 navigation ，不含熱門文章、熱門作者）
2.會員註冊（不含修改密碼）
3.會員登入
4.文章發表
5.文章瀏覽
6.文章編輯
7.文章刪除
8.首頁（熱門作者、熱門文章）
9.會員註冊（修改密碼）

會這麼做是因為要按照功能的重要權重進行，
假設今天你在做一個專案，重要得是整體的完整性而非局部的完整性。

如果你有熱門文章，但是沒有可以瀏覽文章的頁面，這樣也是 fail，
但是如果你有瀏覽文章頁面，但是沒有熱門文章頁面，這樣還有救。XD

簡言之，比起局部徹底做好一個子部位，瞄準全站重要的核心細節先做完，
之後再回來補剩下 second priority 的功能是更理想的作法。

這也是筆者跑專案經驗中跟其他人比較不同的作法。

因為我怕這篇不小心就會突破本日的文章字數上限，
所以我們就快速按照這個順序實作完吧，

照慣例，先寫 code 後解釋，今天解釋不完的就明天解釋。:)

1.首頁

這裡我們需要實作的有幾個部份，
我們先參考底下這張之前畫過的 wireframe 圖。

我們會按照常見的設計慣例在上方有幾個連結可以回到首頁，
右上角有登入狀態及登入鈕，而登入後可能會出現 My Articles 這樣，

所以我們要先為首頁進行設計，首頁的 view 根據我們之前的範例，
是 application/views/welcome_message.php。

* 套入 _site_head.php 、 _site_footer.php

<?php include("_site_header.php"); ?>
<div class="container">
這是首頁內容，尚未進行內容設計。
</div>
<?php include("_site_footer.php"); ?>

* 實作我們需要的上方連結，這裡我們直接使用 bootstrap nav 幫助我們快速開發。:)

<?php include("_site_header.php"); ?>
<div class="container home">

<div class="content-header">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="<?=site_url("/")?>">The Articles</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">My Articles</a></li>
</ul>

<ul class="nav pull-right">
<li><a href="<?=site_url("user/login")?>">登入</a></li>
<li class="divider-vertical"></li>
<li><a href="<?=site_url("user/register")?>">註冊</a></li>
</ul>
</div>
</div>
</div>


<div class="content">
<div>
熱門文章(待實作)
</div>
<div>
熱門作者(待實作)
</div>
</div>
</div>
<?php include("_site_footer.php"); ?>

實作結果如下圖：

有句話說，像不像、三分樣。
有沒有開始覺得比較像樣一些了？

＠再一次進行模組化

眼尖的讀者應該會發現，這條導覽列（navigation bar）應該會出現在很多地方，
所以這時候我們也要抽 _content_nav.php 囉！

application/views/_content_nav.php

<div class="content-header">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="<?=site_url("/")?>">The Articles</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">My Articles</a></li>
</ul>

<ul class="nav pull-right">
<li><a href="<?=site_url("user/login")?>">登入</a></li>
<li class="divider-vertical"></li>
<li><a href="<?=site_url("user/register")?>">註冊</a></li>
</ul>
</div>
</div>
</div>

而我們的首頁 (welcome_message.php) 也就對應調整為：

<?php include("_site_header.php"); ?>
<div class="container home">
<?php include("_content_nav.php") ?>

<div class="content">
<div>
熱門文章(待實作)
</div>
<div>
熱門作者(待實作)
</div>
</div>
</div>
<?php include("_site_footer.php"); ?>

接著我們可能會希望全站的畫面都有這個 navigation bar，
所以我們回頭調整 register_success.php / register.php 。

因為筆者怕一萬字的文章字數塞不下所有程式碼，
所以程式碼請參考這個連結：https://gist.github.com/3888869

馬上來瀏覽修改完的結果：

1.註冊頁：